踩坑记16 vue

2024-01-11 05:58| 来源: 网络整理| 查看: 265

2021.8.16

坑53（vue3、vue-router4、动态路由、刷新404或白屏、next）：

简略版：（tips：不只刷新会出问题，输入网址导航也会）

1、刷新404：将匹配全部为定义路径到404的路由从静态路由表中去除，在动态权限路由都添加了之后在添加。接下来可能会报warn并白屏，解决方法见下一条2。

2、刷新白屏：如果是在路由守卫router.beforeEach中检测并用router.addRoute添加的路由，则需要将动态权限路由添加后的next()放行，改为next(to)触发新导航。注意：使用next(to)相当于总共调用了两次路由导航，会触发两次router.beforeEach，其他一些相关监听，也会被调用两次，需要注意调整。

详细踩坑情况：

前情提要：之前配置静态路由的时候，将不匹配地址统一导航到了404页面，路由代码如下：

{ path: '/:pathMatch(.*)*', redirect: '/404' }

这导致在动态权限添加路由时，所添加的权限路由在使用地址匹配时都会被拦截导航到404页面（输入网址导航、刷新页面会，在页面中通过点击等方式直接触发的路由变化不会）。

所以将此路由从静态路由表去除，放到动态权限路由获取相关函数中，在动态权限路由添加之后添加即可。

但是，当刷新页面时，还是会报错warn，并且显示白屏：

vue-router.esm-bundler.js:72 [Vue Router warn]: No match found for location with path "/xxx/yyy"

提示表示没能匹配到相应路径，也就是说路由还没加上。查看addRoute的文档 API 参考 | Vue Router (vuejs.org)，有提示"请注意，添加路由并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。"

而代码中router.addRoute的触发是在路由守卫router.beforeEach中检测到当前未保存（用vuex）动态菜单信息（网络请求获取）时，之后用next()放行。而根据文档提示和控制台相关打印信息可以看到，warn提示在addRoute添加路由之前，所以解决方法是将next()改为next(to)，触发新的一个导航，此时可以正确匹配到动态权限路由的相应地址。

参考： VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明_cimo的博客-CSDN博客

坑54（vue、css、样式错误）：

问题产生：设置动态权限路由后，发现从登录页进入到内容页时，所有的内容页都会混乱，刷新可恢复正常。

原因：vue的script中的css属性会全局生效，而在使用动态路由后，前一页vue组件中的script的css属性被带到了这一页。

方法1：更改使用样式的class名，使其不与其他页面中的class名重复，比如此次导致问题产生的是container类，将其名称改为loginContainer类后，问题解决。

方法2：在样式style后添加scoped，使其中的css仅作用于当前组件中的元素，文档： Scoped CSS | Vue Loader (vuejs.org)。

参考：vue 路由跳转，导致页面样式错乱，刷新又好了的情况_韦金-CSDN博客和 Vue Router路由跳转，导致页面样式错乱_花铛-CSDN博客_vue3路由跳转后排版错乱。

坑55（vue-router4、removeRoute()、router.options.routes未更新）：在用户退出登录时，使用了removeRoute()来删除动态权限获取的菜单路由，但是router.options.routes未更新，依然保留动态路由在内。详细前情提要见踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias_Alloom的博客-CSDN博客，坑50（vue-router4、addRoute()、router.options.routes未更新），以下方法一、二与其对应。